<template>
  <div class="device_upload_status">
    <span class="state_icon_color" :class="stateColor">{{data.statusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'DeviceUploadStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据任务类型返回相应class
    stateColor() {
      switch (this.data.statusValue) {
        case 'Uploaded':
          // 已上传
          return 'device_uploaded'
        case 'ToBeUploaded':
          // 未上传
          return 'device_notUploaded'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 设备数据上传状态颜色 */
  // 未上传
  @mesdeviceNotUploaded: #7e8e9f;
  // 已上传
  @mesdeviceUploaded: #00b4ff;

  .device_upload_status{
    .state_icon_color{
      /*设备数据上传状态*/
      // 已上传
      &.device_uploaded:before{
        background-color: @mesdeviceNotUploaded;
      }
      // 未上传
      &.device_notUploaded:before{
        background-color: @mesdeviceUploaded;
      }
    }
  }
</style>
